<?php
/**
 * @var $this \yii\web\View
 * @var $routes []
 * Created by PhpStorm.
 * User: jiangjunxian
 * Date: 2016/11/30
 * Time: 16:00
 */
use yii\bootstrap\Html;
use yii\helpers\Json;

$this->title = '路由管理';
$this->params['breadcrumbs'][] = $this->title;
$opts = Json::htmlEncode($routes);

$this->registerJs('var _opts = ' . $opts . ';');
$this->registerJs($this->render('_script.js'));
$animateIcon = ' <i class="fa fa-spinner fa-pulse fa-fw"></i>';

?>
<div class="row">
	<div class="col-sm-12">
		<div class="box box-danger">
			<div class="box-body">
					<input type="text" placeholder="新建一个路由..." class="form-control" id="new-route">
			</div>
			<div class="box-footer">
				<?= Html::a('<i class="fa fa-newspaper-o"></i> 新建' . $animateIcon, ['route/create'], [
					'class' => 'btn btn-success pull-right',
					'id' => 'btn-new',
				]) ?>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-sm-5">
		<div class="box box-primary">
			<div class="box-header">
				<h3 class="box-title">存在的路由</h3>
			</div>
			<div class="box-body">
				<input type="text" class="form-control search" data-target="available" placeholder="查找存在的路由...">
				<label for="available" class="sr-only">存在的跌幅</label>
				<select multiple size="20" class="form-control routes" id="available"></select>
			</div>
		</div>
	</div>
	<div class="col-sm-2">
		<?= Html::a('<i class="fa fa-long-arrow-right"></i>'.$animateIcon, ['route/assign'], [
			'class' => 'btn btn-success btn-block operation',
			'title' => '获取',
			'data-target' => 'available',
			'style' => 'margin-top: 80px; margin-bottom: 20px;',
		]) ?>
		<?= Html::a('<i class="fa fa-long-arrow-left"></i>' . $animateIcon, ['route/remove'], [
			'class' => 'btn btn-danger btn-block operation',
			'title' => '删除',
			'data-target' => 'assigned',
			'style' => 'margin-bottom: 20px;'
		]) ?>
		<?= Html::a('<i class="fa fa-refresh"></i>' . $animateIcon, ['route/refresh'], [
			'class' => 'btn btn-primary btn-block',
			'title' => '刷新',
			'id' => 'btn-refresh',
		]) ?>
	</div>
	<div class="col-sm-5">
		<div class="box box-primary">
			<div class="box-header">
				<h3 class="box-title">获取的路由</h3>
			</div>
			<div class="box-body">
				<input type="text" class="form-control search" data-target="assigned" placeholder="查找获取的路由">
				<label for="assigned" class="sr-only">获取的路由</label>
				<select multiple size="20" class="form-control routes" id="assigned"></select>
			</div>
		</div>
	</div>
</div>
